<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta charset="UTF-8">
	<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-icon" href="images/icon.png"/>
	<link rel="icon" type="image/png" href="images/icon.png" />
	<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="images/splash_iPad_portrait.png" />
	<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="images/splash_iPad_landscape.png" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>五子棋-1</title>

	<link rel="stylesheet" href="remote_files/jquery.mobile-1.2.0.min.css" />
	<script src="remote_files/jquery-1.8.2.min.js"></script>
	<script src="remote_files/jquery.mobile-1.2.0.min.js"></script>

	<link rel="stylesheet" href="style/w.min.css" />
	<link rel='stylesheet' href='style/style.css' type='text/css'/>

	<script src='js/Player.js' type='text/javascript'></script>
	<script src='js/Board.js' type='text/javascript'></script>
	<script src='js/Game.js' type='text/javascript'></script>
	<script src='js/layout.js' type='text/javascript'></script>
	<script src='js/interface.js' type='text/javascript'></script>
	<script src='js/storage.js' type='text/javascript'></script>
</head>
<body ontouchstart="">
<div class='fullscreen-wrapper' id='happy-outer'>
	<img src='images/happy.png' class='happy-face screen-center'>
</div>
<div class='fullscreen-wrapper' id='sad-outer'>
	<img src='images/sad.png' class='sad-face screen-center'>
</div>
<div data-role='page' data-theme='w' id='game-page' class='no-background'>
	<div data-role='content' class='center no-padding'>
		<div id='game-region'>
			<header class='game-ult'>五子棋-1</header>
			<div id='game-info' class='game-ult ui-bar ui-bar-e'>
				<span class='go black'></span>
				<span class='cont'>轮到你了。</span>
			</div>
			<div id='main-but-group' class='game-ult'>
				<a href='#new-game' data-rel='dialog' data-role='button' data-icon="grid">新游戏</a>
				<a href='#' id='undo-button' data-icon="back"  data-role='button' >撤销</a>
			</div>
			<div id='other-but-group' class='game-ult'>
				<a href='#help-page' id='help-button' data-icon="star" data-role='button'>关于</a>
			</div>
			<div class='go-board' data-enhance=false>
				
			</div>
			<table class='board' data-enhance=false>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
</div>
<div id='game-won' data-theme='e' data-role='dialog'>
	<div data-role='header'>
		<h4>你赢了！</h4>
	</div>
	<div data-role='content'>
		<div id='win-content'>
			你赢了！再玩一次吗？
		</div>
		<fieldset class="ui-grid-a">
			<div class="ui-block-a"><button class='back-to-game'  data-theme='c'>返回</button></div>
			<div class="ui-block-b">
				<a href='#new-game' data-rel='dialog' data-role='button' data-icon="grid">
					开始新游戏
				</a>
			</div>	   
		</fieldset>
	</div>
</div>
<div id='new-game'  data-theme='e' data-role='dialog' class='long-dialog'>
	<div data-role='header'>
		<h4>新游戏</h4>
	</div>
	<div data-role='content'>
		<fieldset data-role="controlgroup"  data-theme='e' id='mode-select'>
			<legend>与谁对战</legend>
				<input type="radio" name="radio-choice-1" id="radio-choice-1" value="vshuman"/>
				<label for="radio-choice-1">人类（玩家）</label>

				<input type="radio" name="radio-choice-1" id="radio-choice-2" value="vscomputer"  />
				<label for="radio-choice-2">电脑（人工智能）</label>
		</fieldset> 
		
		<fieldset data-role="controlgroup" data-theme='e' id='color-select' class='vs-computer'>
			<legend>你的棋子颜色</legend>
				<input type="radio" name="radio-choice-1" id="radio-choice-2" value="black" data-theme='a'  />
				<label for="radio-choice-2">黑色</label>
				
				<input type="radio" name="radio-choice-1" id="radio-choice-1" value="white" data-theme='c' />
				<label for="radio-choice-1">白色</label>
		</fieldset>
		
		<fieldset data-role="controlgroup"  data-theme='e' id='level-select'  class='vs-computer'>
			<legend>难度等级</legend>
			
				<input type="radio" name="radio-choice-1" id="radio-choice-1" value="novice" />
				<label for="radio-choice-1">新手</label>

				<input type="radio" name="radio-choice-1" id="radio-choice-2" value="medium"  />
				<label for="radio-choice-2">普通</label>

				<input type="radio" name="radio-choice-1" id="radio-choice-3" value="expert"  />
				<label for="radio-choice-3">专家</label>
				
		</fieldset>
		<fieldset class="ui-grid-a">
			<div class="ui-block-a"><button class='back-to-game'  data-theme='c'>返回</button></div>
			<div class="ui-block-b"><button id='start-game'  data-theme='b'>开始</button></div>	   
		</fieldset>
	</div>
</div>

<div data-role='dialog' data-theme='e' id='help-page'>
	<div data-role='header'>
		<h4>关于</h4>
	</div>
	<div data-role='content' class='thin-content'>
		<p>我是 Yujian，我出于兴趣做了这个游戏。你可以通过这个链接查看<a href='http://yjyao.com'>我的网站</a>，看看我做的其他不太成熟的小项目，或者了解更多关于我的信息。你也可以点击<a href="http://yjyao.com/2012/06/gomoku-in-html5.html">这里</a>阅读更多关于这个游戏的内容。或者，你可以将这个游戏安装到 Chrome 浏览器中，和/或点击<a href="https://chrome.google.com/webstore/detail/ngbpiahelilpgbnonpjfaoegaigopepa">这里</a>发表你的评论。</p>
		<p>另外，希望你在与我的人工智能对战或被它虐的过程中玩得开心！</p>
		<p>
      <a href="https://github.com/yyjhao/HTML5-Gomoku" target="_blank">原项目仓库</a>
      <a href="https://github.com/Firfr/gomoku_zh-cn" target="_blank">镜像制作仓库</a>
    </p>
	</div>
</div>
<script>
	function colorText(color) {
		// console.log(color);
    switch (color.toLowerCase()) {
      case "black":
        return "黑子";
        break;
      case "white":
        return "白子";
        break;
      default:
        return color
    }
	}
</script>
</body>
</html>
